<template>
  <view class="detail-view">
    <view class="top-view clearfix">
      <view class="float_left">
        <text v-if="order_detail.auditStatus === 2" class="status-text"
          >已审核</text
        >
        <text v-else class="status-text">待审核</text>
      </view>
    </view>
    <view class="detail-cont">
      <view class="info-li clearfix">
        <view class="label">调拨单编号</view>
        <view class="value" @click="copy(order_detail.no)">
          <u-icon
            margin-right="20"
            label-pos="left"
            :label="order_detail.no"
            name="copy"
            custom-prefix="custom-icon"
            size="24"
          ></u-icon>
        </view>
      </view>
      <view class="info-li clearfix">
        <view class="label">调出仓库</view>
        <view class="value">{{ order_detail.warehouseName }}</view>
      </view>
      <view class="info-li clearfix">
        <view class="label">调入仓库</view>
        <view class="value">{{ order_detail.inWarehouseName }}</view>
      </view>
      <block v-if="order_detail.auditStatus === 2">
        <view class="info-li clearfix">
          <view class="label">审核人</view>
          <view class="value">{{ order_detail.auditName }}</view>
        </view>
        <view class="info-li clearfix">
          <view class="label">审核时间</view>
          <view class="value">{{
            $u.timeFormat(order_detail.auditTime, "yyyy-mm-dd hh:MM:ss")
          }}</view>
        </view>
      </block>
      <block v-else>
        <view class="info-li clearfix">
          <view class="label">制单人</view>
          <view class="value">{{ order_detail.operatorName }}</view>
        </view>
        <view class="info-li clearfix">
          <view class="label">制单时间</view>
          <view class="value">{{
            $u.timeFormat(order_detail.createTime, "yyyy-mm-dd hh:MM:ss")
          }}</view>
        </view>
      </block>
      <view class="goods-title">商品清单</view>
      <view class="goods-ul">
        <view
          class="goods-li clearfix"
          v-for="(item, index) in order_detail.details"
          :key="index"
        >
          <view class="goods-name ellipsis">{{ item.materielName }}</view>
          <view class="goods-num clearfix">
            <view class="float_left">{{ item.materielCode }}</view>
            <text class="float_right"
              >{{ item.unitName }};{{ item.skuName }}</text
            >
          </view>
          <view class="num-ul">
            <view class="num-li">
              <text>{{ $utils.formatNub(item.inventoryNum) }}</text>
              <view class="label">可售库存</view>
            </view>
            <view class="num-li">
              <text>{{ $utils.formatNub(item.num) }}</text>
              <view class="label">调拨数量</view>
            </view>
            <view class="num-li" v-if="item.isEq === 5">
              <text>{{ $utils.formatNub(item.otherNum) }}</text>
              <view class="label">其他单位</view>
            </view>
          </view>
          <view class="num-ul">
            <view class="num-li" v-if="item.outStorageLocationName">
              <text>{{
                item.outAreaName + "-" + item.outStorageLocationName
              }}</text>
              <view class="label">调出库区库位</view>
            </view>
            <view class="num-li" v-if="item.inStorageLocationName">
              <text>{{
                item.inAreaName + "-" + item.inStorageLocationName
              }}</text>
              <view class="label">调入库区库位</view>
            </view>
          </view>
        </view>
      </view>
      <view class="remark-li">
        <view class="label">备注</view>
        <view class="remark">
          <text>{{ order_detail.remark || "无" }}</text>
        </view>
      </view>
    </view>
    <view class="detail-bottom" v-if="order_detail.auditStatus === 1">
      <view
        v-if="$accessCheck($Access.PurchaseOrderEditPurchase)"
        class="handel-btn info-btn"
        @click="openModel('请确认是否要删除调拨单？', '删除')"
        >删除</view
      >
      <view
        v-if="$accessCheck($Access.PurchaseOrderEditPurchase)"
        class="handel-btn"
        @click="goPage('/pagesT/stock/Allocationedit?id=' + order_id)"
        >编辑</view
      >
      <view
        v-if="$accessCheck($Access.PurchaseOrderEditPurchase)"
        class="handel-btn"
        @click="openModel('确定要审核通过该调拨单吗？', '审核')"
        >审核</view
      >
    </view>
    <u-modal
      v-model="model_show"
      :show-cancel-button="true"
      :content="model_content"
      @confirm="modelConfirm"
    ></u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      model_tag: "",
      model_show: false,
      model_content: "",
      order_id: 0,
      order_detail: {},
    };
  },
  onPullDownRefresh() {
    this.getAllocateInfo();
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
  onLoad(options) {
    this.order_id = options.id;
  },
  onShow() {
    this.getAllocateInfo();
  },
  methods: {
    // 详情
    getAllocateInfo() {
      this.$u.api
        .getAllocateInfo(this.order_id)
        .then((res) => {
          uni.stopPullDownRefresh();
          this.order_detail = res.data;
        })
        .catch((err) => {
          uni.stopPullDownRefresh();
        });
    },
    // 打开提示框
    openModel(content, tag) {
      this.model_content = content;
      this.model_show = true;
      this.model_tag = tag;
    },
    // 审核
    modelConfirm() {
      switch (this.model_tag) {
        case "审核":
          this.updateAuditStatusPurchase();
          break;
        case "删除":
          this.delPurchase();
          break;
      }
    },
    // 审核订单
    updateAuditStatusPurchase() {
      this.$u.api
        .auditAllocate(this.order_id, {
          auditStatus: "2",
          auditName: this.userInfo.name || "",
        })
        .then((res) => {
          this.$u.toast("审核成功");
          setTimeout(() => {
            uni.navigateBack();
          }, 2000);
          this.getAllocateInfo();
        });
    },
    // 删除调拨单
    delPurchase() {
      this.$u.api.deleteAllocate(this.order_id).then((res) => {
        this.$u.toast("已删除");
        setTimeout(() => {
          uni.navigateBack();
        }, 2000);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.detail-view {
  padding-bottom: 100rpx;
}

.top-view {
  background-color: $uni-color-primary;
  height: 200rpx;
  padding: 0 30rpx;
  color: #ffffff;
  font-size: 40rpx;
  line-height: 100rpx;

  .status-text {
    margin-right: 10rpx;
  }

  .float_right {
    font-size: 28rpx;
  }
}

.detail-cont {
  width: 710rpx;
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 20rpx 0;
  overflow: hidden;
  transform: translateY(-80rpx);

  .info-li {
    padding: 0 30rpx;
    line-height: 80rpx;

    .label {
      float: left;
      color: #879bba;
    }

    .value {
      float: right;
    }

    .money-label {
      font-weight: bold;
    }

    .money-value {
      font-weight: bold;
      font-size: 30rpx;
    }
  }

  .remark-li {
    padding: 0 30rpx;

    .label {
      color: #879bba;
      line-height: 60rpx;
    }
  }

  .b-b {
    border-bottom: 1px solid #ecf0f7;
  }

  .goods-title {
    background-color: #fb5904;
    line-height: 72rpx;
    width: 644rpx;
    margin: 30rpx auto 0;
    color: #ffffff;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    padding: 0 24rpx;
    position: relative;
    z-index: 1;
  }

  .goods-ul {
    padding: 0 30rpx 30rpx;
    box-shadow: 0px -3px 12rpx 0px #e4eaf5;
    .goods-li {
      padding-top: 24rpx;
      border-bottom: 1px solid #ecf0f7;
      .goods-img {
        margin-right: 20rpx;

        image {
          width: 150rpx;
          height: 150rpx;
          border-radius: 8rpx;
          display: block;
        }
      }

      .info {
        .goods-name {
          width: 640rpx;
          height: 34rpx;
          line-height: 34rpx;
        }

        .goods-code {
          font-size: 24rpx;
          padding-top: 10rpx;
        }

        .goods-num {
          width: 100%;
          padding-top: 10rpx;
          font-size: 24rpx;

          .price {
            font-size: 28rpx;
            font-weight: bold;
            color: $uni-color-error;
          }
        }
      }
    }
  }
}
.num-ul {
  display: flex;
  font-size: 24rpx;
  padding-top: 20rpx;
  .num-li {
    flex: 3;
    border-right: 1px solid #ecf0f7;
    text-align: center;
    .label {
      color: #879bba;
      padding-top: 6rpx;
    }
    &:last-child {
      border-right: 0 none;
    }
  }
}
</style>
